import React from 'react'

function drag(Com) {
  return(top, left)=>{
     return class NewCom extends React.Component{
        state = {
              top,
              left
        }
        // 这写方法
        onMouseMove = (ev) => {
          const disX = ev.pageX
          const disY = ev.pageY
          this.setState({
            left: disX,
            top:disY
          })
        }
        onMouseDown = (ev) => {
          const disX = ev.pageX
          const disY = ev.pageY
          // 定义模块位置
          this.setState({
            left: disX,
            top:disY
          })
          //按下鼠标后 监听鼠标移动事件("事件类型"，当前函数)
          document.body.addEventListener("mousemove", this.onMouseMove)
          document.body.addEventListener("mouseup", () => {
            document.body.removeEventListener("mousemove",this.onMouseMove)
          })
        }
        
       render() {
          const {top,left}=this.state
          return <div className='pos'
              onMouseDown={this.onMouseDown}
              style={{
                top,
                left
              }}
            >
              <Com/>
            </div>
          
        }
      } 
  }
 
}

export {
  drag
} 